<!-- agent状态监控 -->
<template>
	<div v-cloak id="agentStatusDiv" class="agentStatusContainer">
		<div id="buttonDiv">
			<el-row>
				<el-button v-hasPermi="['monitor:agent:admin']" @click="editAgentIpHandle">Agent管理</el-button>
				<el-button v-hasPermi="['monitor:agent:threshold']" @click="editThresholdHandle">阀值设置</el-button>
			</el-row>
		</div>
		<div id="agentHeadDiv" class="agentHeadDivClass">
			<el-row :gutter="20">
				<el-col :span="14"> Agent总览（今天）： </el-col>
				<el-col :span="10">
					<div class="agentHeandTitleClass">Agent概况：</div>
					<!-- 搜索条件 -->
					<el-form :model="formData" :inline="true" :label-width="100" size="normal">
						<el-form-item label="Agent Ip" prop="agentIp">
							<el-input v-model="formData.agentIp" placeholder="请输入AgentIp" clearable class="yd-input" style="width: 200px" />
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="Search" @click="searchHandler">查 询</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</div>
		<div id="agentContentDiv">
			<el-row :gutter="20">
				<el-col :span="14">
					<div id="leftDiv">
						<div id="countDiv">
							<el-row>
								<el-col :span="6">
									<el-row> Agent总数 </el-row>
									<el-row>
										<el-col :span="6">
											<span>{{ agentData.agentCountInfo.agentIpCount === null ? 0 : agentData.agentCountInfo.agentIpCount }}</span>
										</el-col>
									</el-row>
								</el-col>
								<el-col :span="6">
									<el-row> 断采个数 </el-row>
									<el-row>
										<el-col :span="6">
											<span class="numberSpan" @click="loadAgentTableHandle(2)">
												{{ agentData.agentCountInfo.breakCollectCount === null ? 0 : agentData.agentCountInfo.breakCollectCount }}
											</span>
										</el-col>
									</el-row>
								</el-col>
								<el-col :span="6">
									<el-row> 异常个数 </el-row>
									<el-row>
										<el-col :span="6">
											<span class="numberSpan" @click="loadAgentTableHandle(1)">{{
												agentData.agentCountInfo.wrongCount === null ? 0 : agentData.agentCountInfo.wrongCount
											}}</span>
										</el-col>
									</el-row>
								</el-col>
								<el-col :span="6">
									<el-row> 正常个数 </el-row>
									<el-row>
										<el-col :span="6">
											<span class="numberSpan" @click="loadAgentTableHandle(0)">{{
												agentData.agentCountInfo.normalCount === null ? 0 : agentData.agentCountInfo.normalCount
											}}</span>
										</el-col>
									</el-row>
								</el-col>
							</el-row>
						</div>

						<div id="topDiv">
							<div id="topHeadDiv">TopN分析(今天):</div>
							<!--图表-->
							<el-row>
								<div class="bg-chart">
									<div ref="breakTop" class="chart-item"></div>
								</div>
							</el-row>
							<el-row>
								<div class="bg-chart">
									<div ref="wrongTop" class="chart-item"></div>
								</div>
							</el-row>
						</div>
					</div>
				</el-col>

				<el-col :span="10">
					<div id="rightDiv" class="rightDivClass">
						<div class="rightTableClass">
							<!--查询列表-->
							<YdTable
								ref="multipleTable"
								:formData="formData"
								:tableConfig="tableConfig"
								:tableData="tableData.data"
								@sizeChangeHandler="queryGrid"
								@currentChangeHandler="queryGrid"
								@sortChangeHandler="queryGrid"
							>
							</YdTable>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>

		<!-- 修改阀值对话框 -->
		<el-dialog
			v-model="open.thresholdAddDialog"
			:title="title"
			width="500px"
			append-to-body
			center
			:close-on-click-modal="false"
			@close="cancelThresholdHandle"
		>
			<el-form ref="thresholdFormRef" :model="thresholdForm" :rules="rules" label-width="150px">
				<el-row>
					<el-form-item label="指标名称:"> 最大阀值 </el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="重启次数(次/天):" prop="rebootCount">
						<el-input-number v-model="thresholdForm.rebootCount" controls-position="right" :min="1" :precision="0" placeholder="请输入重启次数" />
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="丢包率(%):" prop="lostRate">
						<el-input-number
							v-model="thresholdForm.lostRate"
							controls-position="right"
							:min="1"
							:max="100"
							:precision="0"
							placeholder="请输入丢包率"
						/>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="CPU使用率(%):" prop="cpuRate">
						<el-input-number
							v-model="thresholdForm.cpuRate"
							controls-position="right"
							:min="1"
							:max="100"
							:precision="0"
							placeholder="请输入CPU使用率"
						/>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="内存使用率(%):" prop="memoryRate">
						<el-input-number
							v-model="thresholdForm.memoryRate"
							controls-position="right"
							:min="1"
							:max="100"
							:precision="0"
							placeholder="请输入内存使用率"
						/>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="磁盘使用率(%):" prop="diskRate">
						<el-input-number
							v-model="thresholdForm.diskRate"
							controls-position="right"
							:min="1"
							:max="100"
							:precision="0"
							placeholder="请输入磁盘使用率"
						/>
					</el-form-item>
				</el-row>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitThresholdForm">确 定</el-button>
					<el-button @click="cancelThresholdHandle">取 消</el-button>
				</div>
			</template>
		</el-dialog>

		<!--agentIp管理-->
		<el-dialog
			v-model="open.agentIpDialog"
			:title="title"
			width="900px"
			append-to-body
			center
			:close-on-click-modal="false"
			@close="cancelEditIpHandle"
		>
			<div>
				<div id="agentIpSearchDiv">
					<!-- 搜索条件 -->
					<el-form :model="ipAgentFormData" :inline="true">
						<el-form-item label="Agent Ip" prop="searchKey" style="width: 425px">
							<el-input v-model="ipAgentFormData.searchKey" placeholder="请输入请输入AgentIP/计算机名/别名进行搜索" clearable class="yd-input" />
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="Search" @click="agentIpSearchHandler">查 询</el-button>
						</el-form-item>
					</el-form>
				</div>

				<div style="margin-top: 10px">
					<!--按钮-->
					<el-row :gutter="10" class="mb8" style="padding-left: 17px">
						<el-col :span="1.5">
							<div
								v-hasPermi="['monitor:agent:edit']"
								:class="buttonIsDisabled(editDialogForm.singleSelect)"
								:disabled="editDialogForm.singleSelect"
								@click="updateAgentIpHandle"
							>
								<svg-icon icon-class="yd-icon-edit" class="icon-style" circle></svg-icon>
								<span class="icon-title" style="margin-left: 2px; margin-right: 15px; font-size: 14px"> 修改 </span>
							</div>
						</el-col>

						<el-col :span="1.5">
							<div
								v-hasPermi="['monitor:agent:delete']"
								:disabled="editDialogForm.singleSelect"
								:class="buttonIsDisabled(editDialogForm.singleSelect)"
								@click="deleteAgentIpHandle"
							>
								<svg-icon icon-class="yd-icon-edit" class="icon-style" circle></svg-icon>
								<span class="icon-title" style="margin-left: 2px; margin-right: 15px; font-size: 14px"> 删除 </span>
							</div>
						</el-col>
						<el-col :span="1.5">
							<div @click="saveAgentIpHandle">
								<svg-icon icon-class="yd-icon-plus" class="icon-style" circle></svg-icon>
								<span class="icon-title" style="margin-left: 2px; margin-right: 15px; font-size: 14px"> 保存 </span>
							</div>
						</el-col>
						<el-col :span="1.5">
							<div @click="cancelAgentIpHandle">
								<svg-icon icon-class="yd-icon-delete" class="icon-style" circle></svg-icon>
								<span class="icon-title" style="margin-left: 2px; margin-right: 15px; font-size: 14px"> 取消 </span>
							</div>
						</el-col>
					</el-row>

					<div id="alarmDialogScrollbar" style="height: 350px">
						<el-scrollbar style="height: 100%">
							<!--查询列表-->
							<el-table
								ref="agentIpTable"
								v-loading="editDialogForm.loading"
								:data="editDialogForm.agentIpList"
								@selection-change="agentIpSelectionChangeHandle"
							>
								<el-table-column type="selection" width="50" align="center" />
								<el-table-column label="Agent IP" align="center" prop="agentIp" />
								<el-table-column label="计算机名" align="center" prop="hostName" />
								<el-table-column label="发现时间" align="center" prop="lastUpdateTime" />
								<el-table-column label="别名" align="center" prop="aliasName">
									<template #default="scope">
										<span v-if="scope.row.enable">
											<el-input v-model="scope.row.aliasName"></el-input>
										</span>
										<span v-else>{{ scope.row.aliasName }}</span>
									</template>
								</el-table-column>
								<el-table-column label="不监控的磁盘分区" align="center" prop="removeDiskPartition">
									<template #default="scope">
										<span v-if="scope.row.enable">
											<el-input v-model="scope.row.removeDiskPartition"></el-input>
										</span>
										<span v-else>{{ scope.row.removeDiskPartition }}</span>
									</template>
								</el-table-column>
							</el-table>
						</el-scrollbar>
					</div>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="cancelEditIpHandle">关 闭</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="AgentStatusMonitoring" lang="ts">
import { ref, reactive, onMounted, onUnmounted, onActivated, onDeactivated, watch, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import {
	getAgentTable,
	getAgentCount,
	getBreakTop,
	getWrongTop,
	updateCollectTopStatusByIp,
	updateWrongTopStatusByIp,
	updateThresholdByCode,
	queryAgentThresholdByCode,
	getAgentIpList,
	updateAgentByIp,
	deleteAgentByIps,
} from '@/api/management/selfMonitoring/agentStatusMonitoring';
import * as echarts from 'echarts';
import useAppStore from '@/store/modules/app';
import { noDataOption } from '@/utils/chartNoData';

const { proxy }: any = getCurrentInstance();

const router = useRouter();
const appStore = useAppStore();
const agentIpTable = ref();
const thresholdFormRef = ref();

// 弹出层标题
const title = ref('');
// 表单参数
let thresholdForm = ref<anyObj>({});
//ip管理表单
let ipAgentFormData = reactive<anyObj>({});
let agentData = reactive<anyObj>({
	//统计信息
	agentCountInfo: {
		agentIpCount: 0,
		breakCollectCount: 0,
		wrongCount: 0,
		normalCount: 0,
	},
	//当前选中的状态，默认展示异常信息
	selectAgentStatus: 1,
});
// 图表实例
const breakTop = ref();
const wrongTop = ref();

//图表
let chart: anyObj = {
	breakTop: null,
	wrongTop: null,
};
// 是否显示弹出层
let open = reactive<anyObj>({
	thresholdAddDialog: false,
	agentIpDialog: false,
});
let editDialogForm = reactive<anyObj>({
	ids: [],
	singleSelect: true,
	loading: true,
	agentIpList: [],
	tempAgentIpList: [],
	agentIps: [],
});
// 表单校验
const rules = ref<anyObj>({
	rebootCount: [{ required: true, message: '重启次数不能为空', trigger: 'blur' }],
	lostRate: [{ required: true, message: '丢包率不能为空', trigger: 'blur' }],
	cpuRate: [{ required: true, message: 'CPU使用率不能为空', trigger: 'blur' }],
	memoryRate: [{ required: true, message: '内存使用率不能为空', trigger: 'blur' }],
	diskRate: [{ required: true, message: '磁盘使用率不能为空', trigger: 'blur' }],
});
// 搜索表单数据
let formData = reactive<FormModelType>({
	pageNum: 1,
	pageSize: 10,
});
// 列表配置
let tableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: 'Agent IP',
			prop: 'agentIp',
		},
		{
			label: '别名',
			prop: 'aliasName',
		},
		{
			label: '状态',
			prop: 'agentStatus',
			formatter(row: any, val: any) {
				// Agent状态：0正常；1异常；2断采
				if (val === 0) {
					return '正常';
				} else if (val === 1) {
					return '异常';
				} else {
					return '断采';
				}
			},
		},
		{
			label: '发生次数',
			prop: 'normalCount',
			sortable: true,
			operation: [
				{
					text: undefined,
					rowKey: 'normalCount',
					handler: (scope: any) => jumpToAgentListHandle(scope.row),
				},
			],
		},
	],
	// 开启复选框
	enableSelection: false,
	// 开启分页
	pagination: {
		pageNum: 1,
		pageSize: 10,
		total: 0,
	},
	// 加载层
	loading: false,
});
// 列表数据
let tableData = reactive({
	data: [],
});
// 图形自适应
const activatedFlag = ref(false);

onMounted(() => {
	getAgentCount().then((res: ApiResponse) => {
		if (res.code !== 0) {
			proxy.$modal.msgWarning(res.msg);
			return;
		}
		agentData.agentCountInfo = res.data;
	});
	initCharts();

	activatedFlag.value = true;
	// 添加resize监听器,自适应图表大小
	window.addEventListener('resize', chartResize);
});
onUnmounted(() => {
	// 销毁resize监听器
	window.removeEventListener('resize', chartResize);
});
onActivated(() => {
	activatedFlag.value = true;
	chartResize();
});
onDeactivated(() => {
	activatedFlag.value = false;
});
// 监听侧边栏收缩展开状态
watch(
	() => appStore.sidebar.opened,
	() => {
		if (activatedFlag.value) {
			setTimeout(() => {
				chartResize();
			}, 150);
		}
	}
);

// 初始化图形
function initCharts() {
	chart.breakTop = echarts.init(breakTop.value);
	chart.wrongTop = echarts.init(wrongTop.value);
	chart.breakTop?.on('dblclick', (params: any) => {
		proxy.$modal
			.confirm('请确认是否要清空当前ip：' + params.name + '的数据，且重新排名？', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				cancelButtonClass: 'confirm-rigth-cancel-button',
				type: 'warning',
			})
			.then(() => {
				updateCollectTopStatusByIp({ agentIp: params.name }).then((res) => {
					if (res.code === 0) {
						proxy.$modal.msgSuccess('清空成功');
						queryMap();
					} else {
						proxy.$modal.msgWarning(res.msg);
					}
				});
			})
			.catch(() => {});
	});
	chart.wrongTop.on('dblclick', (params: any) => {
		proxy.$modal
			.confirm('请确认是否要清空当前ip：' + params.name + '的数据，且重新排名？', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				cancelButtonClass: 'confirm-rigth-cancel-button',
				type: 'warning',
			})
			.then(() => {
				updateWrongTopStatusByIp({ agentIp: params.name }).then((res) => {
					if (res.code === 0) {
						proxy.$modal.msgSuccess('清空成功');
						queryMap();
					} else {
						proxy.$modal.msgWarning(res.msg);
					}
				});
			})
			.catch(() => {});
	});
	queryMap();
}
// 重新设置图表宽高
function chartResize() {
	Object.keys(chart).forEach((key) => {
		chart[key].resize();
	});
}
/**
 * 图表配置项
 * @param myChart 图表
 * @param mapData 图表数据
 * @param title 图表标题
 */
function setOption(myChart: any, mapData: any, title: string) {
	myChart.clear();
	if (mapData.yAxis !== null && mapData.yAxis.length > 0) {
		myChart.setOption({
			title: {
				text: title,
				textStyle: {
					color: '#fff',
				},
				left: 'center',
				top: 15,
			},
			tooltip: {},
			legend: {},
			grid: {
				x: 50,
				y: 50,
				bottom: '2%',
				containLabel: true,
			},
			xAxis: {
				splitLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: '#fff',
					},
				},
				type: 'value',
				boundaryGap: [0, 0.01],
			},
			yAxis: {
				splitLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: '#fff',
					},
				},
				inverse: true,
				type: 'category',
				data: mapData.yAxis,
			},
			series: [
				{
					type: 'bar',
					data: mapData.data,
					itemStyle: {
						borderRadius: 5,
						color: (params: any) => {
							const colorList = ['#1cd1a1', '#fe5578', '#978aff', '#ff9a0c', '#4a98ff', '#2beded', '#feca57', '#ffb5a6', '#ffffd2', '#2bf3aa'];
							return colorList[params.dataIndex];
						},
						label: {
							show: true,
							position: 'right',
						},
					},
					//barWidth: '50%',
					barMaxWidth: 20,
				},
			],
		});
	} else {
		noDataOption(myChart, {
			text: title,
			textStyle: {
				color: '#fff',
			},
			top: 20,
			left: 40,
		});
	}
}
/**
 * 表格数据查询
 */
function queryMap() {
	getBreakTop().then((res) => {
		const mapData = res.data;
		setOption(chart.breakTop, mapData, '断采次数Top5');
	});
	getWrongTop().then((res) => {
		const mapData = res.data;
		setOption(chart.wrongTop, mapData, '异常次数Top5');
	});
}
//点击统计状态查询对应的列表数据
function loadAgentTableHandle(agentStatus: any) {
	agentData.selectAgentStatus = agentStatus;
	searchHandler();
}
// 搜索
function searchHandler() {
	formData.pageNum = 1;
	queryGrid();
}
//查询列表数据
function queryGrid() {
	tableConfig.loading = true;
	formData.agentStatus = agentData.selectAgentStatus;
	console.log('formDAta', formData);
	getAgentTable(formData)
		.then((res: ApiResponse) => {
			tableConfig.loading = false;
			if (res.code !== 0) {
				proxy.$modal.msgWarning(res.msg);
				return;
			}
			tableData.data = res.data.records;
			tableConfig.pagination!.total = res.data.length;
		})
		.catch((e: any) => {
			tableConfig.loading = false;
		});
}
/** 阀值编辑 */
function submitThresholdForm() {
	thresholdFormRef.value?.validate((valid: any) => {
		if (valid) {
			//新增或者修改提交前先校验表达式
			if (thresholdForm.value.thresholdCode !== undefined) {
				updateThresholdByCode(thresholdForm.value).then((res: ApiResponse) => {
					if (res.code === 0) {
						proxy.$modal.msgSuccess('修改成功');
						open.thresholdAddDialog = false;
					} else {
						proxy.$modal.msgWarning(res.msg);
						return;
					}
				});
			}
		}
	});
}
//取消阀值编辑弹出框
function cancelThresholdHandle() {
	open.thresholdAddDialog = false;
	thresholdFormRef.value?.resetFields();
}
function editThresholdHandle() {
	title.value = '阀值管理';
	queryAgentThresholdByCode().then((res: ApiResponse) => {
		thresholdForm.value = res.data;
	});
	open.thresholdAddDialog = true;
}
//点击编辑agentIp
function editAgentIpHandle() {
	title.value = 'Agent管理';
	open.agentIpDialog = true;
	agentIpSearchHandler();
}
//点击搜索按钮
function agentIpSearchHandler() {
	queryAgentIpList();
}
//查询agentIp信息
function queryAgentIpList() {
	getAgentIpList({ searchKey: ipAgentFormData.searchKey }).then((res: ApiResponse) => {
		editDialogForm.agentIpList = res.data;
		//深复制
		editDialogForm.tempAgentIpList = JSON.parse(JSON.stringify(res.data));
	});
	editDialogForm.loading = false;
}
//选中事件处理
function agentIpSelectionChangeHandle(selection: any) {
	editDialogForm.ids = selection.map((item: any) => item.id);
	editDialogForm.agentIps = selection.map((item: any) => item.agentIp);
	editDialogForm.singleSelect = selection.length !== 1;
}
//选中修改
function updateAgentIpHandle() {
	const ids = editDialogForm.ids;
	const data = editDialogForm.agentIpList;
	if (ids.length <= 0) {
		proxy.$modal.msgWarning('请勾选需要修改的Agent信息');
		return;
	}
	let num = 0;
	let tempItem;
	if (data !== null && data.length > 0) {
		for (let i = 0; i < data.length; i++) {
			const item = data[i];
			if (item.enable) {
				num = num + 1;
			}
			if (item.id === ids[0]) {
				tempItem = item;
			}
		}
	}
	if (num === 0 && tempItem) {
		tempItem.enable = true;
	} else {
		proxy.$modal.msgWarning('已经有正在编辑的数据，请先保存');
		return;
	}
}
//选中删除
function deleteAgentIpHandle() {
	const agentIps = editDialogForm.agentIps;
	if (agentIps.length <= 0) {
		proxy.$modal.msgWarning('请勾选需要删除的Agent信息');
		return;
	}
	proxy.$modal
		.confirm('是否需要删除已经勾选的Agent信息?', '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			cancelButtonClass: 'confirm-rigth-cancel-button',
			type: 'warning',
		})
		.then(() => {
			deleteAgentByIps(agentIps).then((res) => {
				if (res.code === 0) {
					proxy.$modal.msgSuccess('删除成功');
					// 刷新列表
					agentIpSearchHandler();
					// 更新父页面数据，如 'Agent总数' 等
					getAgentCount().then((res: ApiResponse) => {
						if (res.code !== 0) {
							proxy.$modal.msgWarning(res.msg);
							return;
						}
						agentData.agentCountInfo = res.data;
					});
				} else {
					proxy.$modal.msgWarning(res.msg);
					return;
				}
			});
		})
		.catch(function () {});
}
//保存agentIp的修改
function saveAgentIpHandle() {
	const data = editDialogForm.agentIpList;
	if (data !== null && data.length > 0) {
		let item = null;
		for (let i = 0; i < data.length; i++) {
			if (data[i].enable) {
				item = data[i];
			}
		}
		if (item !== null && item.enable) {
			updateAgentByIp(item).then((res) => {
				if (res.code === 0) {
					//深复制
					editDialogForm.tempAgentIpList = JSON.parse(JSON.stringify(data));
					proxy.$modal.msgSuccess('保存成功');
					proxy.$refs.agentIpTable.clearSelection();
					agentIpSearchHandler();
				} else {
					proxy.$modal.msgError('保存失败');
				}
			});
		} else {
			proxy.$modal.msgWarning('没有要保存的信息');
		}
	}
}
//取消修改
function cancelAgentIpHandle() {
	editDialogForm.agentIpList = [];
	editDialogForm.agentIpList = JSON.parse(JSON.stringify(editDialogForm.tempAgentIpList));
}
//关闭编辑agentIp弹出框
function cancelEditIpHandle() {
	open.agentIpDialog = false;
}
function jumpToAgentListHandle(row: any) {
	let jumpPath = '/admin/selfMonitoring/normalAgentList';
	if (row.agentStatus === 2) {
		jumpPath = '/admin/selfMonitoring/breakAgentList';
	} else if (row.agentStatus === 1) {
		jumpPath = '/admin/selfMonitoring/wrongAgentList';
	}
	if (
		(row.agentStatus === 0 && proxy.checkPermi(['monitor:normalAgentList'])) ||
		(row.agentStatus === 1 && proxy.checkPermi(['monitor:wrongAgentList'])) ||
		(row.agentStatus === 2 && proxy.checkPermi(['monitor:breakAgentList']))
	) {
		router.push({
			path: jumpPath,
			query: {
				agentIp: row.agentIp,
				agentStatus: row.agentStatus,
			},
		});
	}
}
//按钮css 控制
function buttonIsDisabled(val: any) {
	if (val) {
		return 'disabled';
	}
	return 'enabled';
}

searchHandler();
agentIpSearchHandler();
</script>

<style rel="stylesheet/scss" lang="scss">
.agent-ip-dialog-managment {
	.el-input--prefix {
		width: 330px !important;
	}
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
// @import '@/assets/styles/admin/index.scss';

/*给统计数格加边框*/
#countDiv {
	/*border: 1px solid #888888;*/
	text-align: center;
}

/*整个统计行往右移动*/
#countDiv .el-row {
	padding-left: 12px;
}

/*统计文字*/
#countDiv .el-col .el-col-4 {
	padding-top: 10px;
	width: 100px;
	height: 40px;
}

/*统计数字*/
#countDiv .el-col .el-col-6 {
	padding-top: 1px;
	padding-bottom: 10px;
	width: 100px;
	height: 40px;
	font-size: 30px;
}

/*给数据加下划线*/
#countDiv .numberSpan {
	text-decoration: underline;
	cursor: pointer;
	/*color: rgb(255, 154, 12);*/
}
#countDiv .numberSpan:hover {
	color: #34b5ff;
}

/*top文字样式*/
#topHeadDiv {
	padding-top: 20px;
	padding-bottom: 5px;
}

#alarmDialogScrollbar .el-table__body-wrapper .is-scrolling-none {
	border: #2b2f3a solid 1px;
}

/*调整agnetIp管理输入框大小*/
#agentIpSearchDiv .el-input--prefix {
	width: 370px !important;
}

/*调整agnetIp管理搜索宽度*/
#agentIpSearchDiv .el-col-24 {
	height: 40px;
}

/*调整agnetIp概况搜索宽度*/
#rightDiv .el-col-24 {
	height: 40px;
}

/*统计头部文字*/
#countHeadDiv {
	padding-top: 10px;
}

/*按钮下面的文字*/
#agentHeadDiv .el-col-14 {
	padding-top: 10px;
	padding-bottom: 0px;
}

/*按钮样式*/
/*.el-button{
    border: 1px solid #888888;
  }*/

/*和搜索一起的文字靠左*/
#agentHeadDiv .agentHeandTitleClass {
	float: left;
	padding-top: 10px;
}
.chart-item {
	width: 100%;
	height: 300px;
}

.container {
	margin: 10px;
}

/*top图样式*/
#topDiv .bg-chart {
	/*border-radius: 15px;*/
	/*margin: 5px;*/
	/*background-color: #e7eaec;*/
	/*border: 1px solid #888888;
    height: 300px;
    width: 950px;
    */
	width: 100%;
	margin-bottom: 10px;
}

// .icon-style {
// 	color: $--admin-color-btn-title;
// }

/*操作按钮启用*/
.enabled {
	// color: $--admin-color-btn-title;
	cursor: pointer;

	.icon-title {
		&:hover {
			// color: $--admin-color-btn-title-hover;
			text-decoration: underline;
		}

		&:active {
			// color: $--admin-color-btn-title-active;
		}
	}
}

/*操作按钮禁用*/
.disabled {
	// color: $--admin-color-btn-title-disabled;
	cursor: not-allowed;
}
</style>
